/**
 * @description 登录页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Input, Radio, Tooltip, Select } from 'antd';
import {
  InfoCircleOutlined
} from '@ant-design/icons';

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { TimeFormatTip, TimeFormatUrl } from '@/utils/Const';
import { setAttrForm } from '@/utils/AttrForm';
import { copyTemplate, pasteTemplate } from '@/utils/clipboard';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import FileUpload from '@/components/StylesWrapper/FileUpload';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';


// 标题和后缀现实的开关
const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]




function headerAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------


  const items = useMemo(() => {
    // 一级
    const items = [
      {
        key: 'page',
        label: '内容总盒子',
        children:
          <StyleWrapper form={form} preKeys={['page', 'default']} onStyleChange={() => upateStyleEvent(['page'])} />
      },
      {
        key: 'header',
        label: '头部盒子',
        children:
          <StyleWrapper form={form} preKeys={['header', 'default']} onStyleChange={() => upateStyleEvent(['header'])} />
      },
      {
        key: 'title',
        label: '标题',
        children:
          <Collapse accordion size='middle' items={[
            {
              key: 'box',
              label: '盒子',
              children:
                <StyleWrapper form={form} preKeys={['title', 'default']} onStyleChange={() => upateStyleEvent(['title'])} />
            },
            {
              key: 'text',
              label: '文本',
              children:
                <>
                  <Form.Item
                    label="开关"
                    name={['base', 'title_flag']}
                  >
                    <Radio.Group
                      options={titleShowOptions}
                      onChange={(e) => onConfigEvent(['base', 'title_flag'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>
                  <StyleWrapper form={form} preKeys={['title_text', 'default']} onStyleChange={() => upateStyleEvent(['title_text'])} />
                </>
            },
            {
              key: 'img',
              label: '图片',
              children:
                <>
                  <Form.Item
                    label="开关"
                    name={['base', 'title_img_flag']}
                  >
                    <Radio.Group
                      options={titleShowOptions}
                      onChange={(e) => onConfigEvent(['base', 'title_img_flag'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />

                  </Form.Item>

                  <FileUpload form={form} label='图片' name={['base', 'title_img_url']} onConfigEvent={onConfigEvent} />

                  <StyleWrapper form={form} preKeys={['title_img', 'default']} onStyleChange={() => upateStyleEvent(['title_img'])} />
                </>
            },
          ]} />
      },
      {
        key: 'weather',
        label: '天气',
        children:
          <Collapse accordion size='middle' items={[
            {
              key: 'box',
              label: '盒子',
              children: <StyleWrapper form={form} preKeys={['weather', 'default']} onStyleChange={() => upateStyleEvent(['weather'])} />,
            },
            {
              key: 'city',
              label: '城市',
              children: <StyleWrapper form={form} preKeys={['weather_city', 'default']} onStyleChange={() => upateStyleEvent(['weather_city'])} />,
            },
            {
              key: 'tem',
              label: '温度',
              children: <StyleWrapper form={form} preKeys={['weather_tem', 'default']} onStyleChange={() => upateStyleEvent(['weather_tem'])} />,
            },
            {
              key: 'wea',
              label: '气象',
              children: <StyleWrapper form={form} preKeys={['weather_wea', 'default']} onStyleChange={() => upateStyleEvent(['weather_wea'])} />,
            },
            {
              key: 'win',
              label: '风向',
              children: <StyleWrapper form={form} preKeys={['weather_win', 'default']} onStyleChange={() => upateStyleEvent(['weather_win'])} />,
            },
            {
              key: 'speed',
              label: '风力',
              children: <StyleWrapper form={form} preKeys={['weather_speed', 'default']} onStyleChange={() => upateStyleEvent(['weather_speed'])} />,
            },
          ]} />
      },
      {
        key: 'time',
        label: '时间',
        children:
          <>
            <Form.Item
              label="格式"
              name={['base', 'time_format']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'time_format'], e.target.value)}
                suffix={
                  <Tooltip title={TimeFormatTip}>
                    <InfoCircleOutlined
                      style={{
                        color: 'rgba(0,0,0,.45)',
                      }}
                      onClick={() => window.open(TimeFormatUrl, "_blank")}
                    />
                  </Tooltip>
                }
              />
            </Form.Item>
            <StyleWrapper form={form} preKeys={['time', 'default']} onStyleChange={() => upateStyleEvent(['time'])} />

          </>
      },
      {
        key: 'notice',
        label: '公告',
        children:
          <>
            <Form.Item
              label="开关"
              name={['base', 'notice_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'notice_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="类型"
              name={['base', 'notice_type']}
            >
              <Select
                options={[{ label: '类型一: 按钮', value: '1' }, { label: '类型二: 跑马灯', value: '2' }]}
                onChange={(value) => onConfigEvent(['base', 'notice_type'], value)}
              >
              </Select>
            </Form.Item >

            <Form.Item
              label="文本"
              name={['base', 'notice_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'notice_text'], e.target.value)}
              />
            </Form.Item>


            <Collapse accordion size='middle' items={template2.base.notice_type == '1' ?
              [
                {
                  key: 'btn',
                  label: '按钮',
                  children:
                    <StyleWrapper form={form} preKeys={['notcie1', 'default']} onStyleChange={() => upateStyleEvent(['notcie1'])} />
                },
                {
                  key: 'btn—hover',
                  label: '按钮悬浮',
                  children:
                    <StyleWrapper form={form} preKeys={['notcie1', 'hover']} onStyleChange={() => upateStyleEvent(['notcie1'])} />
                }
              ]
              :
              [
                {
                  key: 'box',
                  label: '盒子',
                  children:
                    <StyleWrapper form={form} preKeys={['notice', 'default']} onStyleChange={() => upateStyleEvent(['notice'])} />
                },
                {
                  key: 'text',
                  label: '标题',
                  children:
                    <>
                      <StyleWrapper form={form} preKeys={['notice_title', 'default']} onStyleChange={() => upateStyleEvent(['notice_title'])} />
                    </>

                },
                {
                  key: 'content',
                  label: '内容',
                  children:
                    <StyleWrapper form={form} preKeys={['notice_content', 'default']} onStyleChange={() => upateStyleEvent(['notice_content'])} />

                },
              ]} />

          </>

      },
      {
        key: 'user',
        label: '用户信息',
        children:
          <Collapse accordion size='middle' items={[
            {
              key: 'box',
              label: '盒子',
              children:
                <StyleWrapper form={form} preKeys={['user', 'default']} onStyleChange={() => upateStyleEvent(['user'])} />
            },
            {
              key: 'avatar',
              label: '头像',
              children:
                <StyleWrapper form={form} preKeys={['user_avatar', 'default']} onStyleChange={() => upateStyleEvent(['user_avatar'])} />
            },
            {
              key: 'name',
              label: '昵称',
              children:
                <StyleWrapper form={form} preKeys={['user_name', 'default']} onStyleChange={() => upateStyleEvent(['user_name'])} />

            },
          ]} />
      },
    ]
    return items
  }, [
    template2.base.notice_type,
    updateCtx.updateFlag
  ])



  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='top'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 6,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(headerAttr) 